//使用配置文件后 构建命令就是 webpack了 手动写出来

const path = require('path')

//导入刚刚安装的 html-webpack-plugin 安装命令 npm i html-webpack-plugin
//只要是插件，都一定要放到plugins 节点中去
//这个插件的两个作用:
// 1.自动在内存中根据页面生成一个内存的页面
// 2.自动把打包好的bundle.js自动追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
module.exports = {
    // 配置webpack 生产环境 development  和开发环境 production
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那个文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件输出到那个目录中去
        filename: 'bundle.js' //这是指定输出文件的名称
    }, 
    devServer:{ //这个是配置 webpack-dev-server 命令参数的第二种形式，相对来说这种方式麻烦一些
        open: true,//自动打开浏览器
        port: 3000,
        contentBase: 'src',
        hot:true
    },
    plugins:[//配置插件的节点
        new htmlWebpackPlugin({ //创建一个 在内存中生成HTML 页面的插件
            template: path.join(__dirname,'./src/index.html'),//指定模板页面 将来会根据指定的页面路径去生成内存中的页面
            filename: 'index.html', //内存中的页面
        })
    ],
    module: { //这个节点用于配置所有的第三方模块加载器
        rules: [
            {test: /\.css$/,use:['style-loader','css-loader']},//配置处理.css文件第三方 loader规则
            
            // 这样是对所有的图片都进行base64处理，小图片不处理，大图片进行处理
            //  {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader']},//处理图片路径的加载器
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470']},//处理图片路径的加载器
            // 这里的limit 给定的值 是图片的大小，单位是 byte ,如果当前给定的值大于或等于图片的大小，会转换成base64，如果当前给定的值小于图片的大小值，就不会转成base64

                     // 让文件保持原来的名称不变
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[name].[ext]']},
   
                     // 让文件保持原来的名称不变 但是前面加了8位的哈希值
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[hash:8]-[name].[ext]']},

            // 处理字体加载器
            {test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},//处理字体文件的loader

            // 配置来es6高级语法的加载器 babel-loader  
            {test: /\.js$/,use:'babel-loader',exclude:/(node_modules|bower_components)/},
        ]
        
    }



    
}